

import React,{useState} from "react";

type UserInfo = {name:string,age:number,sex:string};
type GameInfo = {score:number,win:boolean};
// 泛型 指定传入的参数类型
const User:React.FC<UserInfo> = (props) => {

    const {name,age,sex} = props;
    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
            <div>{sex}</div>

            <Counter count={9} />
            <Article title="标题" content="66666的内容"/>
        </div>
    )
}


type countInfo = {
    count:number
}
const Counter:React.FC<countInfo> = (props) => {

    const [count,setCount] = useState(props.count);
    
    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count+1)}>+1</button>
            <button onClick={() => setCount(count-1)}>-1</button>
        </div>
    )
}


const Article:React.FC<{title:string,content:string}> = function(props){
    const {title,content} = props;

    return (
        <article>
            <header><h1>{title}</h1></header>
            <main>{content}</main>
        </article>
    )
}

export default User;